<template>
  <div class="notrigger-container">
    <div style="padding:10px;margin: 6px 10px 0;">
      <el-form :model="form">
        <el-form-item>
          <el-input class="bizcode-input" v-model="form.bizCode" clearable placeholder="业务编码" @blur="searchBizCode"/>
        </el-form-item>
      </el-form>
    </div>
    <TableComponent v-loading="isLoading" :assetList="tableDataList" :tableColumns="tableColumns"
      element-loading-text="加载中...">
      <template #operation="{ row }">
        <span>cdn文件下发</span>
        <el-switch
          v-model="row.status"
          class="ml-2"
          style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
          @change="switchChange(row,$event)"
        />
        <el-button :disabled="!row.status" size="small"
            type="text" @click="openFileDialog(row)">文件选择
        </el-button>
      </template>
    </TableComponent>
    <div style="display: flex;justify-content: center;margin-top: 30px">
        <el-button  type="primary" @click="nextStep()">下一步</el-button>
    </div>
    <SelectFile ref="SelectFileRef" @submitSelectFile="getSelectFile"></SelectFile>
  </div>
</template>

<script setup>
import { ref, reactive} from 'vue';
import { ElMessage } from 'element-plus';
import {useRouter} from "vue-router";
import TableComponent from '@/components/TableComponent.vue';
import { tableColumns } from '@/constant/cdnConfigurationNoTrigger.js';
import { queryBizListzByBizCode } from '@/api/cdnConfigurationApi';
import SelectFile from "./components/SelectFile.vue";

const emit = defineEmits();
const router = useRouter();

const form = reactive({
  bizCode: ''
})
const isLoading = ref(false)
const SelectFileRef = ref(null)
const tableDataList = ref([])
const noTriggerCdnConfig = ref([])


// 查询业务列表
const getBizList = (data) => {
  isLoading.value = true
  queryBizListzByBizCode(data).then(res => {
    if(res.data.code === 200){
      tableDataList.value = res.data.data
      noTriggerCdnConfig.value = res.data.data
      noTriggerCdnConfig.value.forEach((item) => {
            item.status = true
        })
    }else{
      ElMessage.error('查询失败')
    }
    isLoading.value = false
  })
}
// 搜索业务编码
const searchBizCode = () => {
  if(form.bizCode === '') return 
  let req = {
    bizCode: form.bizCode
  }
  getBizList(req)
}

// 打开文件弹窗
const openFileDialog = (row) => {
  SelectFileRef.value.switchVisible(row, 'noTriggerPage')
}
// 获取选中的文件，存入提交的字段中
const getSelectFile = (bizId,fileId) => {
  noTriggerCdnConfig.value.forEach((item) => {
    if(item.id === bizId){
      item.fileId = fileId
      item.status = true
    }
  })
}

const switchChange = (row,val) => {
  noTriggerCdnConfig.value.forEach((item) => {
    if(item.id === row.id){
      item.status = val
    }
  })
}

const nextStep = () => {
  if (noTriggerCdnConfig.value.length > 0) {
      router.push({
          path: '/triggerConfiguration/ConfigurationComparison',
          name: 'configurationComparison',
          query: {
              id: +new Date(),
              from: 'noTrigger'
          }
      });

      sessionStorage.setItem('NoTriggerRouterPara', JSON.stringify({
        config: noTriggerCdnConfig.value
      }))
  } else {
      ElMessage({
        type: 'warning',
        message: '请查询业务'
      })
  }

}
</script>

<style lang="less" scoped>
.notrigger-container {
  .bizcode-input{
    width: 250px;
  }
}
</style>
